<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 300px;" class="filter-item" placeholder="应用名称" v-model="whereQuery.name"></el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 300px;" class="filter-item" placeholder="应用包名" v-model="whereQuery.packageName"></el-input>
      <el-select clearable style="width: 120px" class="filter-item" v-model="whereQuery.type" placeholder="是否展示" @change="handleFilter">
        <el-option v-for="item in typeOptions" :key="item" :label="item | typeFilter" :value="item">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
              style="width: 100%">
      <el-table-column align="center" label="id" width="300">
        <template slot-scope="scope">
          <span class="link-type" style="font-family: Menlo, Monaco, Consolas, Courier New, monospace;" @click="showJsonObject(scope.row)">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" header-align="center" align="center" label='是否展示' show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.type | typeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="140px" header-align="center" label='应用名称' show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" header-align="center" label='应用包名' show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.packageName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100px" header-align="center" label='版本' show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.version}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150" class-name="small-padding" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type === 2" size="mini" type="success" @click="handleType(scope.row, 1)">展　示</el-button>
          <el-button v-else size="mini" type="warning" @click="handleType(scope.row, 2)">不展示</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="对象" :visible.sync="jsonVisible">
      <el-form label-position="right" style='min-width: 600px;'>
        <el-form-item>
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 27}" v-model="jsonObject">
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { saveAppFilter, listApp } from '@/api/monitor'
  import waves from '@/directive/waves'

  export default {
    name: 'filter',
    directives: {
      waves
    },
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 0,
          size: 10,
          name: undefined,
          packageName: undefined,
          type: undefined
        },
        whereQuery: {
          name: undefined,
          packageName: undefined,
          type: undefined
        },
        typeOptions: [1, 2],
        temp: {
          id: undefined,
          name: undefined,
          type: 1,
          packageName: undefined,
          version: undefined
        },
        dialogFormVisible: false,
        jsonVisible: false,
        jsonObject: undefined,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        }
      }
    },
    filters: {
      json: (value) => { return JSON.stringify(value, null, 2) },
      typeFilter(type) {
        const types = ['展　示', '不展示']
        return type > 0 ? types[type - 1] : '展　示'
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        this.listQuery.name = this.whereQuery.name
        this.listQuery.packageName = this.whereQuery.packageName
        if (this.whereQuery.type !== undefined) {
          this.listQuery.type = this.whereQuery.type
        }
        listApp(this.listQuery).then(response => {
          this.list = response.data.list
          this.total = response.data.total
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 0
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val - 1
        this.getList()
      },
      resetTemp() {
        this.temp = {
          id: undefined,
          name: undefined,
          type: 1,
          packageName: undefined,
          version: undefined
        }
      },
      handleType(row, value) {
        const data = {
          id: row.id,
          type: value
        }
        saveAppFilter(data).then(response => {
          if (response.status === 200) {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          } else {
            this.$notify({
              title: '失败',
              message: response.data.message,
              type: 'info',
              duration: 2000
            })
          }
        })
      },
      showJsonObject(data) {
        this.jsonVisible = true
        this.jsonObject = JSON.stringify(data, null, 4)
      }
    }
  }
</script>
<style scoped>

</style>
